/**
 * frames for application like management
 * 
 * con={
 * items:{
 * 		left:{
			id:'tree',
			html:false,
			url:'tree.html',
			title:'My Tree',
			ui:{
				width:'300',
				height:'100%'
			},
			events:{
				dragable: false,
				resizeable: true
			}
		}},
		ui:{
			background: '#fff',
			width: '100%',
			height: '100%',
			scrollable: true
			theme: false
		},
		events:{
			dragable: false,
			resizeable: true
		}
 * }
 * 
 * @author watson
 */
(function($) {
	$.fn.frames = function(conf){
		var conf = $.extend(true, {}, $.fn.frames.def, conf);
		var $container = $(this);
		var $window = $(window);
		var $parent=$container.parent();

		$.fn.frames.ui($container, conf);
//		var url_rex=/https?:\/\/([-\w\.]+)+(:\d+)?(\/([\w/_\.]*(\?\S+)?)?)?/;
		for(var i in conf.items){
			var item = conf.items[i];
			if(item){
				var $item=$($container.find("div[class=fs-"+i+" hd]")[0]);
				$item.attr('id',item.id).append((item.title?'<div id="'+item.id+'-title" class="panel-header"><div id="'+item.id+'-collapse" class="tool-collapse-'+i+'"></div><span class="panel-header-text">'+item.title+'</span></div>':'')+(item.url?"<iframe id='"+item.id+"-ifr' name='"+item.id+"-ifr' src='"+item.url+"' class='panel-ifr' frameborder='0' height='100%' border='0' ></iframe>":item.html)).show();
				//attachEvents($item, conf.events);
				$container.append('<div id="'+item.id+'-collapsed" class="tool-collapsed-'+i+' hd"><div class="tool-collapsed-icon-'+i+'"></div></div>');
			}
		}
		$('div[class*=tool-collapse]').click(function(){
			var $this=$(this);
			var reg=/tool-collapse-.+/g;
			if(reg.test($this.attr('class'))){
//			if($this.attr('class')=='tool-collapse'){
				var $temp=$this.parent().parent();
				var $pos=$temp.position();
				var $w=$temp.width();
				var $h=$temp.height();
				var $id=$temp.attr('id');
				var $class=$temp.attr('class');
				var $rengent=$class.replace(/fs-/,'').replace(/\s.*/,'')
				switch($rengent){
				case 'header':
					break;
				case 'left':
					break;
				}
				$temp.fadeOut('normal');
				
				
				$('#'+($this.attr('id')+'d')).css($pos).show();
				delete $pos;
				delete $temp;
			} else {
				var $temp=$this.parent();
				var $id=$temp.attr('id').replace('-collapsed','');
				if($id){
					$temp.hide();
					$('#'+$id).fadeIn('normal');
				}
				delete $id;
				delete $temp;
			}
			delete $this;
		});
	};

	//ui
	$.fn.frames.ui = function($obj, conf){
		var $obj=$($obj);
		var _items=conf.items;
		var $w=$obj.width();
		var $h=$obj.height();
		var $header=$('<div class="fs-header hd"></div>');
		var $footer=$('<div class="fs-footer hd"></div>');
		var $left=$('<div class="fs-left hd"></div>');
		var $right=$('<div class="fs-right hd"></div>');
		var $content=$('<div class="fs-content hd"></div>');
		if(_items.header){
			$header.width(typeof _items.header.ui!='undefined'&&_items.header.ui.width?_items.header.ui.width:$w).height(typeof _items.header.ui!='undefined'&&_items.header.ui.height?typeof _items.header.ui.height=='number'?_items.header.ui.height:parseInt(_items.header.ui.height)*$h/100:$h*0.15);
		}
		if(_items.footer){
			$footer.width(typeof _items.footer.ui!='undefined'&&_items.footer.ui.width?_items.footer.ui.width:$w).height(typeof _items.footer.ui!='undefined' &&_items.footer.ui.height?typeof _items.footer.ui.height=='number'?_items.footer.ui.height:parseInt(_items.footer.ui.height)*$h/100:$h*0.15);
		}
		$obj.append($header).append($left).append($content).append($right).append($footer);
		$h-=($header.height()-$footer.height());
		if(_items.left){
			$left.width(typeof _items.left.ui!='undefined'&&_items.left.ui.width?typeof _items.left.ui.width=='number'?_items.left.ui.width:parseInt(_items.left.ui.width)*$w/100:$w*0.15).height(typeof _items.left.ui!='undefined'&&_items.left.ui.height?typeof _items.left.ui.height=='number'?_items.left.ui.height:parseInt(_items.left.ui.height)*$h/100:$h);
		}
		if(_items.right){
			$left.width(typeof _items.right.ui!='undefined'&&_items.right.ui.width?typeof _items.right.ui.width=='number'?_items.right.ui.width:parseInt(_items.right.ui.width)*$w/100:$w*0.15).height(typeof _items.right.ui!='undefined'&&_items.right.ui.height?typeof _items.right.ui.height=='number'?_items.right.ui.height:parseInt(_items.right.ui.height)*$h/100:$h);
		}
		var gen=1;
//		gen=$('div[class*=fs-left]').length+$('div[class*=fs-right]').length+2*$('div[class*=fs-content]').length;
		$w-=($left.width()+$right.width()+gen);
		if(_items.content){
			$content.width(typeof _items.content.ui!='undefined'&&_items.content.ui.width?_items.content.ui.width:$w).height(typeof _items.right.ui!='undefined'&&_items.right.ui.height?_items.right.ui.height:$h);
		}
		
		if(conf.events.resizeable){
			resize($header);
			resize($footer);
			resize($left);
			resize($right);
			resize($content);
		}
		delete $header;
		delete $footer;
		delete $left;
		delete $right;
		delete $content;
		delete _items;
	};
	
	function resize($obj){
		var $obj=$($obj);
		var $parent=$($obj.parent()[0]);
		$obj.width($obj.width()*100/$parent.width()+'%');
		$obj.height($obj.height()*100/$parent.height()+'%');
	};

	function attachEvents($obj, events){
		var $obj=$($obj);
		var $parent=$($obj.parent()[0]);
		if(events.dragable){
			
		}
		if(events.resizeable){
			$obj.width($obj.width()*100/$parent.width()+'%');
			$obj.height($obj.height()*100/$parent.height()+'%');
		}
	};
	
	$.fn.frames.def = {
		items:{
			header: false,
			left: false,
			content: false,
			right: false,
			footer: false
		},
		ui:{
			background: '#fff',
			width: 'auto',
			height: 'auto',
			fullscreen: false,
			scrollable: true,
			theme: false
		},
		events:{
			dragable: false,
			resizeable: true
		}
	};
})(jQuery);